<template>
  <div class="my">
    <!-- 顶部 -->
    <div class="top" v-if="userInfo">
      <!-- 用户信息 -->
      <div class="user">
        <div class="usericon" @click="$router.push('/info')">
          <img :src="userInfo.photo" alt="" />
        </div>
        <div class="userinfo">
          <div class="username">{{ userInfo.name }}</div>
          <div class="renzhen">申请认证</div>
        </div>
        <div class="userright">
          <van-icon class="icon" name="user-o" />
          <div class="box">
            <span class="one">今日阅读</span>
            <span class="two">{{ num }}分钟</span>
          </div>
        </div>
      </div>
      <div class="userData">
        <div class="item">
          <span class="num" @click="$router.push(`/componteall/?title=${1}`)">{{
            userDataList.art_count
          }}</span>
          动态
        </div>
        <div class="item" @click="$router.push(`/componteall/?title=${2}`)">
          <span class="num">{{ userDataList.follow_count }}</span>
          关注
        </div>
        <div class="item" @click="$router.push(`/componteall/?title=${2}`)">
          <span class="num">{{ userDataList.fans_count }}</span>
          粉丝
        </div>
      </div>
    </div>
    <!-- 中部字体图标 -->
    <div class="threeBox">
      <div class="items" @click="$router.push(`/componteall/?title=${3}`)">
        <i class="iconfont icon-shoucang1"></i>
        收藏
      </div>
      <div class="items" @click="$router.push(`/componteall/?title=${3}`)">
        <i class="iconfont icon-lishi"></i>
        历史
      </div>
      <div class="items" @click="$router.push(`/componteall/?title=${1}`)">
        <i class="iconfont icon-wenzhang"></i>
        作品
      </div>
    </div>
    <!--消息通知 -->
    <div class="four">
      <van-cell title="消息通知" is-link />
      <van-cell title="实名认证" is-link />
    </div>
    <!-- 用户反馈 -->
    <div class="five">
      <van-cell title="用户反馈" is-link />
      <van-cell title="小智同学" is-link />
      <van-cell title="系统设置" is-link />
    </div>
    <!-- <div>{{ num }}</div> -->
  </div>
</template>

<script>
import { UserInfoApi, userDataApi } from '../../../Api/userinfo'
import { mapMutations, mapState } from 'vuex'
export default {
  data () {
    return {
      userDataList: {},
      hours: '', // 设定小时，存在这个变量
      minutes: '', // 设定分，存在这个变量
      seconds: '', // 设定秒，存在这个变量,
      num: 0
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },

  methods: {
    ...mapMutations(['getUserInfo', 'getIntro']),
    // 获取用户基本信息
    async getUser () {
      const res = await UserInfoApi()
      this.getUserInfo(res.data.data)
    },
    // 获取用户数据信息
    async getUserData () {
      const res = await userDataApi()
      this.userDataList = res.data.data
      this.getIntro(res.data.data.intro)
    },
    getxunhuan () {
      this.num = setInterval(() => {
        this.num++
      }, 1000)
    }
  },
  mounted () {
    // setInterval(() => {
    //   this.num++
    // }, 1000)
  },
  created () {
    this.getxunhuan()
    // this.$login()
    // 获取用户信息
    this.getUser()
    // 获取用户关注数据
    this.getUserData()
  }
}
</script>

<style lang="less" scoped>
.my {
  height: 100vh;
  background-color: #f5f7f9;
  .top {
    height: 160px;
    background-color: #3f9dfa;
    padding: 40px 15px 0 15px;
    margin-bottom: 6px;
    .user {
      color: white;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      .usericon {
        width: 70px;
        height: 70px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .userinfo {
        margin-left: -60px;
        margin-top: 10px;
        .username {
          font-size: 16px;
          margin-bottom: 5px;
          text-align: center;
        }
        .renzhen {
          padding: 1px 6px;
          text-align: center;
          color: #429efa;
          font-weight: 700;
          background-color: white;
          border-radius: 10px;
        }
      }
      .userright {
        margin-right: -14px;
        margin-top: 7px;
        display: flex;
        height: 35px;
        align-items: center;
        border-radius: 10px 0 0 10px;
        padding: 5px 10px;
        background-color: #3981c9;
        font-size: 12px;
        .icon {
          font-size: 20px;
          margin-right: 10px;
        }
        .box {
          display: flex;
          flex-direction: column;
          .one {
          }
          .two {
          }
        }
      }
    }
    .userData {
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
      font-size: 16px;
      color: white;
      .item {
        display: flex;
        flex-direction: column;
        text-align: center;
        .num {
          font-size: 18px;
        }
      }
    }
  }
  .threeBox {
    padding: 15px 20px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    .items {
      display: flex;
      flex-direction: column;
      text-align: center;
      font-size: 14px;
      .iconfont {
        margin-bottom: 5px;
        font-size: 20px;
      }
    }
  }
  .four {
    margin-top: 6px;
  }
  .five {
    margin-top: 6px;
  }
}
</style>
